<template>
  <div>
    <span class="demonstration">隔离时间</span>
    <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
    <el-select v-model="value1" multiple placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <el-select
        v-model="value2"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-select
        v-model="value3"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
    <el-select
        v-model="value4"
        multiple
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

    <div style="top:100px">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="name"
            label="姓名"
            width="150">
        </el-table-column>
        <el-table-column
            prop="IdCard"
            label="身份证号码"
            width="120">
        </el-table-column>
        <el-table-column
            prop="cause"
            label="隔离原因"
            width="120">
        </el-table-column>
        <el-table-column
            prop="place"
            label="来访地"
            width="120">
        </el-table-column>
        <el-table-column
            prop="hotel"
            label="隔离酒店"
            width="300">
        </el-table-column>
        <el-table-column
            prop="inTime"
            label="隔离时间"
            width="120">
        </el-table-column>
        <el-table-column
            prop="outTime"
            label="解除隔离时间"
            width="120">
        </el-table-column>

        <el-table-column
            prop="state"
            label="人员状态"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      options: [],
      tableData: [],

      value1: [],
      value2: [],
      value3: [],
      value4: []
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },
};
</script>

<style scoped>

</style>